import React, { Component } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Checkbox, Alert, Icon, Input } from 'antd';
const md5 = require('md5');

import Login from 'components/Login';
import styles from './Login.less';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

import config from '../../common/config';

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
export default class LoginPage extends Component {
  sceneId = new Date().getTime();
  state = {
    uid: this.sceneId,
    rememberMe: true,
    imageCode: '',
    captchaImageUrl: `${config.serveraddress}/admin/getCaptchaImage?uid=${this.sceneId}`,
  };

  onTabChange = type => {
    this.setState({ type });
  };

  handleSubmit = (err, values) => {
    const { uid, imageCode } = this.state;
    const { username, password } = values;
    if (!err) {
      this.props.dispatch({
        type: 'login/login',
        payload: {
          uid,
          username,
          password,
          imageCode,
        },
      });
    }
  };

  changeAutoLogin = e => {
    this.setState({
      rememberMe: e.target.checked,
    });
  };

  renderMessage = content => {
    return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
  };

  changeCode() {
    const sceneId = new Date().getTime();
    this.setState({
      uid: sceneId,
      captchaImageUrl: `${config.serveraddress}/admin/getCaptchaImage?uid=${sceneId}`,
    });
  }

  handleOnchange(field, e) {
    const eleValue = e.target.value;
    this.setState({
      [field]: eleValue,
    });
  }

  render() {
    const { login, submitting } = this.props;
    const { imageCode, captchaImageUrl } = this.state;
    return (
      <div className={styles.main}>
        <Login defaultActiveKey={'account'} onSubmit={this.handleSubmit}>
          <Tab key="account" tab="账户密码登录">
            {login.status === 'error' &&
              login.type === 'account' &&
              !login.submitting &&
              this.renderMessage('账户或密码错误')}
            <UserName name="username" placeholder="账户" />
            <Password name="password" placeholder="密码" />
            <div className="col-head" style={{ marginBottom: '8px' }}>
              <span className="col-input2" style={{ width: '150px' }}>
                <Input
                  style={{ width: '250px', height: '40px' }}
                  type="text"
                  value={imageCode}
                  onChange={this.handleOnchange.bind(this, 'imageCode')}
                  placeholder="请输入验证码"
                />
              </span>
              <span>
                <img
                  id="randomCode"
                  src={captchaImageUrl}
                  border={0}
                  style={{
                    height: '35px',
                    marginLeft: '40px',
                    cursor: 'pointer',
                    verticalAlign: 'middle',
                  }}
                  title="点击刷新验证码"
                  onClick={this.changeCode.bind(this)}
                />
              </span>
            </div>
          </Tab>
          <div>
            <Checkbox checked={this.state.rememberMe} onChange={this.changeAutoLogin}>
              自动登录
            </Checkbox>
            <a style={{ float: 'right' }} href="">
              忘记密码
            </a>
          </div>
          <Submit loading={submitting}>登录</Submit>
        </Login>
      </div>
    );
  }
}
